<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 交集选择器
            注意：如果与标签选择器一起使用，那么标签选择器一定放在第一位
        */
        #div1.div1 {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        div.div1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        /* .box1{
            background-color: red;
        }
        p{
            background-color: pink;
        } */
        .box1,
        p {
            background-color: red;
        }

        /* 小例子样式 */
        .box {
            width: 300px;
            height: 400px;
            background-color: pink;
        }

        .inner1 {
            width: 100px;
            height: 100px;
            background-color: greenyellow;
        }

        .inner2 {
            width: 100px;
            height: 200px;
            background-color: orange;
        }

        /* 划过box让里面的inner改变颜色 */
        /* .box:hover .inner1 {
            background-color: red;
        }

        .box:hover .inner2 {
            background-color: red;
        } */

        /* 使用并集选择器实现 权重是30，以逗号分隔左右两个，分别计算权重  .box:hover .inner1权重是30 后面inner2权重也是30  */
        .box:hover .inner1,
        .box:hover .inner2 {
            background-color: red;
        }
    </style>
</head>

<body>
    <!-- 
        群组选择器：交集选择器  并集选择器
        交集选择器:选择器1选择器2选择器3{css样式}
        
        并集选择器：选择器1，选择器2，选择器3···{css样式}
    -->
    <!-- 交集选择器 -->
    <div class="div1">我是div1</div>
    <div class="div1" id="div1">我是div2</div>
    <div>我是div3</div>
    <p class="div1">我是p冒充的div4</p>

    <!-- 并集选择器 -->
    <div class="box1">我是box1</div>
    <div class="box2">我是box2</div>
    <p>我是p</p>
    <hr>


    <!-- 看看这个小例子 -->
    <!-- 需求: 划过box,改变inner1背景颜色  划过box 改变inner2背景颜色 -->
    <div class="box">
        <div class="inner1">我是inner1</div>
        <div class="inner2">我是inner2</div>
    </div>
</body>

</html>